<template>
  <div class="login">
    <header>
      <van-nav-bar title="嗨购登录" @click-left="$router.back()">
        <template #left>
          <van-icon name="arrow-left" size="25" color="black" />
        </template>
      </van-nav-bar>
    </header>

    <main>
      <van-cell-group border>
        <van-field
          v-model="tel"
          label="手机号"
          placeholder="请输入手机号.."
          autofocus
        />
      </van-cell-group>
      <van-cell-group border>
        <van-field
          v-model="password"
          :type="flag ? 'password' : 'text'"
          label="密码"
          placeholder="请输入密码.."
          :right-icon="flag ? 'closed-eye' : 'eye-o'"
          @click-right-icon="flag = !flag"
        />
        <!-- <van-icon name="closed-eye" /> -->
      </van-cell-group>

      <div class="loginBtn">
        <van-button type="danger" round block @click="login">登录</van-button>
        <router-link to="/register">去注册</router-link>
      </div>
    </main>
  </div>
</template>

<script>
import Vue from "vue";
import { Field, Cell, CellGroup, Button } from "vant";
import { doLogin } from "../api/user";
Vue.use(Field);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Button);
import { Toast } from "vant";
Vue.use(Toast);
export default {
  data() {
    return {
      tel: "",
      password: "",
      flag: true,
    };
  },
  methods: {
    login() {
      doLogin({ loginname: this.tel, password: this.password }).then((res) => {
        console.log(res);
        switch (res.data.code) {
          case "10010":
            Toast("用户不存在");
            break;

          case "10011":
            Toast("密码错误");
            break;

          case "200":
            localStorage.setItem("token", res.data.data.token);
            localStorage.setItem("userid", res.data.data.userid);
            this.$router.push("/home");
            break;

          default:
            break;
        }
      });
    },
  },
};
</script>

<style scoped>
.loginBtn {
  width: 80%;
  margin: 20px auto;
}
</style>